﻿<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8" />
	<title>借阅管理系统登录</title>
	<link rel="stylesheet" type="text/css" href="plugins/font-icon/iconfont.css" />
	<script type="text/javascript" src="plugins/jquery/jquery-min.js"></script>
	<style type="text/css">
		body{
			margin: 0;
		}
		.bg{
			position: absolute;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			background-image: url(images/bg.jpg);
			background-position: center;
			background-size: 100% 100%;
			background-attachment: fixed;
			background-repeat: no-repeat;
			-webkit-filter: blur(1.2px);
            -moz-filter: blur(1.2px);
            -o-filter: blur(1.2px);
            -ms-filter: blur(1.2px);
			filter: blur(1.2px);
			z-index: -999;
		}
		form{
			margin-top: 100px;
			z-index: 999;
		}
		.login-form{
			width: 400px;
			height: 400px;
			background: RGBA(255, 255, 255, 0.1);
			border: 1px solid #a7a7a7;
			border-radius: 5px;
			box-shadow: 0px 0px 5px RGBA(8, 8, 8, 0.75);
			margin-right: auto;
			margin-left: auto;
			padding-top: 30px;
		}
		
		.input{
			width: 284px;
			height: 45px;
			line-height: 45px;
			text-align: center;
			margin: 35px auto;
		}
		
		.input:after{
			content: ',';
			display: inline-block;
			visibility: hidden;
			clear: both;
		}
		
		.input .icon{
			font-size: 30px;
		}
		
		.input > span,
		.input > input{
			height: 45px;
			line-height: 45px;
			border: 1px solid RGBA(240, 240, 240, 0.76);
			float: left;
			background-color: rgba(255, 255, 255, 0.47);
		}
		
		.input > span{
			display: inline-block;
			width: 50px;
			border-right: none;
			height: 47px;
			border-radius: 4px 0px 0px 4px;
		}
		.input > input{
			width: 220px;
			border-radius: 0px 4px 4px 0px;
			font-size: 18px;
   			padding-left: 10px;
   			color: RGBA(0, 0, 0, 0.9);
   			
		}
		.input.validate > input{
			width: 120px;
			color: rgba(0, 0, 0, 0.88);
		}
		.input.validate > img{
			width: 90px;
		    float: left;
		    display: inline-block;
		    margin-left: 10px;
		    height: 42px;
		    line-height: 42px;
		    margin-top: 1px;
		}
		.login-form-btn{
			width: 284px;
		    margin: 0px auto;
		    text-align: center;
		}
		.login-form-btn > a{
			display: inline-block;
			width: 284px;
		    height: 45px;
		    line-height: 45px;
		    text-decoration: none;
		    background-color: rgba(109, 230, 86, 0.9);
		    border-radius: 5px;
		    color: #FFF;
		    font-size: 23px;
    		font-weight: 500;
    		font-family: "微软雅黑";
		    box-shadow: 0px 2px 3px rgba(4, 136, 14, 0.78);
    		text-shadow: 2px 2px 5px #565454;
		}
		.login-form-btn > a:active{
			color: #EAEAEA;
			background-color: rgba(49, 236, 14, 0.86);
		}
		
		.icon-zhanghao{
			color: rgba(241, 40, 40, 0.92);
		}
		.icon-mima{
			color: rgba(135, 0, 220, 0.92);
		}
		.icon-yanzhengma{
			color: rgba(222, 255, 0, 0.8);
		}
		.icon-yanzhengmayanzheng{
			color: rgba(18, 239, 14, 0.91);
		}
		.input.message{
			margin: 10px auto;
			color: #f00;
			font-size: 17px;
		}
	</style>
</head>
<body>
	<div class="bg"></div>
	<form class="login-form">
		<div class="input">
			<span><i class="icon iconfont icon-zhanghao"></i></span>
			<input type="text" id="account" />
		</div>
		<div class="input">
			<span><i class="icon iconfont icon-mima"></i></span>
			<input type="password" id="pw"/>
		</div>
		<div class="input validate">
			<span><i class="icon iconfont icon-yanzhengma"></i></span>
			<input id="validate-box" type="text" /><img id="validate-img" alt="验证码" src="validate-image.jpg" /><!-- 验证码---宽:90px 高:42px -->
		</div>
		<div class="login-form-btn">
			<a href="#" id="login-btn" >Sign In</a>
		</div>
		<div class="input message">
			
		</div>
	</form>
	
	<script type="text/javascript">
		var validate_status = false;
		$('#validate-box')[0].addEventListener('blur', function(){
			$.ajax({
				type: "post",
				url: "validate",
				async:true,
				dataType:"json",
				data: 'validate=' + $('#validate-box').val(),
				success: function(rs){
					if(rs.status){
						$(".input.validate > span i").attr('class', 'icon iconfont icon-yanzhengmayanzheng');
						$('.input.message')[0].innerText = "";
						validate_status = true;
					} else {
						$(".input.validate > span i").attr('class', 'icon iconfont icon-yanzhengma');
						$('.input.message')[0].innerText = "验证码不正确！";
					}
				}
			});
		}, false);
		
		$('#validate-img')[0].addEventListener('click', function(){
			$('#validate-img').attr('src', 'validate-image.jpg?'+new Date().getTime());
			validate_status = false;
		}, false);
		
		$('#login-btn')[0].addEventListener('click', login, false);
		
		function login(){
			if($('#account').val().trim() === "" || $('#pw').val() === ""){
				$('.input.message')[0].innerText = "账号或密码不能为空！";
				return;
			}
			if(!validate_status){
				$('.input.message')[0].innerText = "验证码不正确！！";
				return;
			}
			
			$.ajax({
				type:"post",
				url:"login",
				async:true,
				dataType: 'json',
				data: 'account=' + $('#account').val() + '&password=' + $('#pw').val(),
				success: function(rs){
					if(rs.status === 1){
						window.location.href = 'bbms/index/index';
						sessionStorage.setItem('user', rs.user);
						sessionStorage.setItem('authority', rs.authority);
					} else {
						$('.input.message')[0].innerText = "用户名密码不正确！！";
						$('#pw')[0].value = "";
						$('#validate-img').attr('src', 'validate-image.jpg?'+new Date().getTime());
						$(".input.validate > span i").attr('class', 'icon iconfont icon-yanzhengma');
					}
				}
			});
			
		}
	</script>
</body>
</html>